﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Wei8808Cms.WebSite.Index" %>

<%@ Register Src="UserControl/Nav.ascx" TagName="Nav" TagPrefix="uc1" %>
<%@ Register Src="UserControl/Footer.ascx" TagName="Footer" TagPrefix="uc2" %>
<%@ Register Src="UserControl/Header.ascx" TagName="Header" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media-queries.css">
    <link rel="stylesheet" href="css/prettyPhoto.css">
    <link rel="stylesheet" href="css/styles.zuperSlider.css">
    <!--[if IE 7]><link rel="stylesheet" href="css/ie7.css"><![endif]-->
    <script type="text/javascript" language="javascript" src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body id="top" class="homepage">
    <form id="form1" runat="server">
    <uc3:Header ID="Header1" runat="server" />
    <header id="main">
<uc1:Nav ID="Nav1" runat="server" />
<div class="clearfix"></div>
<div class="zuperWrap">
<div class="zuperSlider">
<ul>
    <%
        foreach (var info in AdbannerList)
        {
            %>
                <li>
                    <a href="<%=info.LinkUrl %>"><img src="<%=info.ImgUrl %>"  alt = "<%=info.Title %>" class="zuper" /></a>
                    <div class="caption captionH1Slide1" data-Effects="fade top" data-Offset="30" data-Delay="200" data-Speed="normal"><%=info.TopRemark %></div> 
                    <div class="caption captionH2Slide1" data-Effects="fade bottom" data-Offset="30" data-Delay="400" data-Speed="normal"><%=info.BottomRemark %></div> 
                </li>
            <%
                }     
        
    %>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="motto-area">
	<h1>微时代用微信做生意，玩弄于鼓掌之间！</h1>
</div>

</header>
    <!--! end of header -->
    <div class="clearfix">
    </div>
    <div class="container">
        <div class="about-area">
            <div class="about-area-line">
                <div class="two_third">
                    <header class="main-title">
        <h3>什么是微商城？</h3>
        <a class="area-more" href="#">更多>> </a>
    </header>
                    <p>
                        <strong>微信商城第一品牌，国内最专业的移动互联网电子商务平台服务提供商。 微购王 ，依托微信平台6亿的用户基数，快速帮助企业搭建微信品牌商城 完美打造前所未有的移动互联网销售渠道，轻松把产品...</strong></p>
                    <p>
                        Suspendisse eget adipiscing massa. Mauris congue sapien et massa luctus facilisis.
                        Vestibulum congue, erat eget vulputate posuere, metus odio ornare ante, quis hendrerit.</p>
                </div>
                <div class="one_third last">
                    <header class="main-title">
        <h3>商家必读</h3>
        <a href="#" class="area-more">更多>></a>
    </header>
                    <p>
                        <strong>手把手教你申请微信支付</strong>
                    </p>
                    <p>
                        Aliquam facilisis turpis eget eros adipiscing in fermentum velit aliquet.</p>
                </div>
            </div>
        </div>
        <div class="clearfix">
        </div>
        <div class="services-area">
            <header class="main-title">
            <h3>产品核心功能</h3>
            <a class="area-more" href="/product.aspx">更多>></a>
            </header>
            <div class="clearfix">
            </div>
            <%
                int idx = 1;
                foreach (var pinfo in ProductList)
                {
            %>
            <a alt="<%=pinfo.ProductName %>" title="<%=pinfo.ProductName %>" href="/product.aspx?id=<%=pinfo.PId%>">
                <div class="one_third <%if(idx % 3 == 0){%>last<%}%>">
                    <figure>
    	                                <img src="<%=pinfo.ProductIcon %>" alt="<%=pinfo.ProductName %>" title="<%=pinfo.ProductName %>">
                                    </figure>
                    <div class="services-box">
                        <p>
                            <strong title="<%=pinfo.ProductName %>">
                                <%=pinfo.ProductName %></strong></p>
                        <em>
                            <%=pinfo.ProductTitle %></em>
                    </div>
                </div>
            </a>
            <%
                    
                if (idx % 3 == 0)
                {
            %>
            <div class="clearfix">
            </div>
            <%
}
                idx++;
                } 
            %>
        </div>
        <div class="copyrights">
            Collect from <a href="http://www.cssmoban.com/">Website Template</a></div>
        <div class="clearfix">
        </div>
        <div class="portfolio-area">
            <header class="main-title">
        <h3>Our portfolio</h3>
        <a class="area-more" href="#">更多>> </a>
    </header>
            <div class="clearfix">
            </div>
            <div class="one_third">
                <figure class="hover-effect">
        	<a href="img/800x600-dummy1.jpg" data-rel="prettyPhoto[mixed]">
        		<img src="img/portfolio-3col-img.jpg" alt="Image description" title="Image title">
            </a>
        </figure>
                <div class="portfolio-box">
                    <p>
                        <strong>Macao Turism</strong></p>
                    <em>Webdesign, SEO, Print</em> <a class="website" href="#">Visit site</a>
                </div>
            </div>
            <div class="one_third">
                <figure class="hover-effect">
        	<a href="img/800x600-dummy2.jpg" data-rel="prettyPhoto[mixed]">
        		<img src="img/portfolio-3col-img-1.jpg" alt="Image description" title="Image title">
            </a>
        </figure>
                <div class="portfolio-box">
                    <p>
                        <strong>Narez Industries</strong></p>
                    <em>Webdesign</em> <a class="website" href="#">Visit site</a>
                </div>
            </div>
            <div class="one_third last">
                <figure class="hover-effect video">
        	<a href="../../../vimeo.com/8245346" data-rel="prettyPhoto[mixed]">
        		<img src="img/portfolio-3col-img-2.jpg" alt="Image description" title="Image title">
            </a>
        </figure>
                <div class="portfolio-box">
                    <p>
                        <strong>Cocoa Multinational</strong></p>
                    <em>Social media, Print, Identity</em> <a class="website" href="#">Visit site</a>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix">
    </div>
    <div class="footer">
        <div class="toggle-features-holder">
            <p class="toggle-features">
                显示最新知识库</p>
        </div>
        <div class="features-area">
            <div class="container">
                <div class="one_third">
                    <figure>
    	<img src="img/services-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Design</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-1-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Slideshows</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third last">
                    <figure>
    	<img src="img/services-2-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Shortcodes</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-3-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Powerfull</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-4-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>SEO</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third last">
                    <figure>
    	<img src="img/services-5-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Mobile</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-module-top">
            <div class="footer-module-bottom">
                <div class="footer-module-middle">
                    <div class="container">
                        <div class="one_third widget">
                            <h3>
                                Text area</h3>
                            <div class="text-area">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar volutpat
                                    venenatis. Vestibulum molestie luctus rutrum. Maecenas gravida pretium justo, eget
                                    varius turpis pharetra vitae. Proin id elit sem, quis mattis leo. Mauris scelerisque,
                                    augue sit amet lobortis hendrerit, ipsum massa bibendum tortor. Read our privacy
                                    policy.</p>
                            </div>
                            <ul class="follow-widget">
                                <li class="twitter"><a href="#">Twitter</a></li>
                                <li class="linkedin"><a href="#">Linkedin</a></li>
                                <li class="facebook"><a href="#">Facebook</a></li>
                                <li class="tumblr"><a href="#">Tumblr</a></li>
                                <li class="flickr"><a href="#">Flickr</a></li>
                            </ul>
                        </div>
                        <!-- end of .widget -->
                        <div class="one_third widget">
                            <h3>
                                Latest tweets</h3>
                            <div id="paging">
                                <div class="widget query">
                                </div>
                                <div class="controls">
                                    <button class="prev" type="button" disabled>
                                        &larr;</button>
                                    <span class="pagenum"></span>
                                    <button class="next" type="button" disabled>
                                        &rarr;</button>
                                </div>
                            </div>
                        </div>
                        <!-- end of .widget -->
                        <div class="one_third widget last">
                            <h3>
                                Latest blog post</h3>
                            <ul class="latest-post">
                                <li>
                                    <figure class="styled circle">
    	<a href="#">
        	<img class="left" src="img/blog-post-thumb.jpg" alt="Image description">
        </a>
        </figure>
                                    <div class="latest-popular-post-meta">
                                        <p class="title">
                                            Maecenas porta tellus eget</p>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet tristi senectus et netus</p>
                                        <p class="blog-date">
                                            2013 / 10 Comments</p>
                                    </div>
                                </li>
                                <!-- end of .blog-post -->
                                <li>
                                    <figure class="styled circle">
    	<a href="#">
        	<img class="left" src="img/blog-post-thumb-1.jpg" alt="Image description">
        </a>
        </figure>
                                    <div class="latest-popular-post-meta">
                                        <p class="title">
                                            Pellentesque habitant morbi</p>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet tristi senectus et netus
                                        </p>
                                        <p class="blog-date">
                                            2013/ 10 Comments</p>
                                    </div>
                                </li>
                                <!-- end of .blog-post -->
                            </ul>
                        </div>
                        <!-- end of .widget -->
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix">
        </div>
        <uc2:Footer ID="Footer1" runat="server" />
        <!-- end of .footer-extra -->
    </div>
    <!-- end of footer -->
    <!-- JavaScript at the bottom for fast page loading -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>        window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
    <!-- scripts concatenated and minified via ant build script-->
    <script type="text/javascript" language="javascript" src="js/jquery.responsinav.js"></script>
    <script type="text/javascript" language="javascript" src="js/script.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.0-packed.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.zuperSlider.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.tweet.js"></script>
    <!-- end scripts-->
    <script type="text/javascript" language="javascript">

        $(function () {
            $(window).responsinav({ breakpoint: 650 });

            /* ====== PrettyPhoto ====== */
            $("a[data-rel^='prettyPhoto']").prettyPhoto({ hook: 'data-rel' });
            $('a[data-rel]').each(function () {
                $(this).attr('rel', $(this).attr('data-rel')).removeAttr('data-rel');
            });

            /* ====== Tweet ====== */
            jQuery(function ($) {
                var options = {
                    username: "cssluxury",
                    page: 1,
                    avatar_size: 0,
                    count: 2,
                    loading_text: "loading ..."
                };

                var widget = $("#paging .widget"),
          next = $("#paging .next"),
          prev = $("#paging .prev");

                var enable = function (el, yes) {
                    yes ? $(el).removeAttr('disabled') :
                $(el).attr('disabled', true);
                };

                var stepClick = function (incr) {
                    return function () {
                        options.page = options.page + incr;
                        enable(this, false);
                        widget.tweet(options);
                    };
                };

                next.bind("checkstate", function () {
                    enable(this, widget.find("li").length == options.count)
                }).click(stepClick(1));

                prev.bind("checkstate", function () {
                    enable(this, options.page > 1)
                }).click(stepClick(-1));

                widget.tweet(options).bind("loaded", function () { next.add(prev).trigger("checkstate"); });
            });
        });
    </script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('.zuperSlider').zuperSlider({
                mode: "none",
                arrows: {
                    next: true,
                    nextHorizontal: "end-71",
                    nextVertical: "end-100",
                    prev: true,
                    prevHorizontal: "end-100",
                    prevVertical: "end-100"
                },
                nav: {
                    active: true,
                    type: "numbers",
                    imagesDimension: "105x55",
                    navHorizontal: "end-70",
                    navVertical: 30,
                    thumbs: false,
                    thumbsDimension: "120x80"
                },
                auto: {
                    active: true,
                    time: 8000,
                    timer: "numbers",
                    hoverStop: true,
                    posHorizontal: 30,
                    posVertical: 20,
                    playPause: true,
                    playPauseHover: true,
                    playPauseHorizontal: 595,
                    playPauseVertical: 28
                },
                animate: {
                    type: "crossFade",
                    speed: 1000,
                    position: ["centerToMarginSquare", "horizontal"],
                    effect: ["fade"],
                    cols: 1,
                    rows: 25,
                    delay: 10,
                    easing: "linear",
                    car_nr: 7,
                    perPage: 1
                },
                multipleEff: {
                    active: false,
                    random: false,
                    eff: []
                },
                order: {
                    random: false,
                    startSlide: 1,
                    firstSlide: 1
                },
                caption: true,
                touchNavigation: true,
                bgImageScaleAndCenter: true,
                responsive: true,
                navigateOnHover: false,
                navigateWithMouseWheel: false
            });
        });
    </script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('.toggle-features-holder').click(function () {
                $('.features-area').animate({ opacity: 1.0 }, 200).slideToggle(function () {
                    $('p.toggle-features').text(
      $(this).is(':visible') ? "关闭" : "显示最新知识库"
    );
                    $('.toggle-features-holder').toggleClass("closed");
                });
            });
        });
    </script>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7 ]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
    </form>
</body>
</style> 